v-bind

動態地綁定 HTML 屬性，將資料傳遞到元素上。

動態屬性

• : 是 v-bind 的縮寫。
• v-bind 可以使用各種 JS 的表達式。
• 可以傳入 data 內的資料。

<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<img :src="'/path/to/images/' + fileName">

// html
<div id="app">
  <input type="text" :value="text">
  <input type="text" :value="1 + 1">
  <br>
  <img :src="imgUrl" alt="">
</div>

// JS
new Vue({
  el: '#app',
  data: {
    text: '這裡有一段話',
    imgUrl: 'https://dw6vrgax4fzym.cloudfront.net/userfiles/sm/sm640480_images_A1/21954/2020090959352893.jpg'
  }
})

• input 中可以使用 :value 動態屬性傳入 data 內的值或是任何 JS 表達式的結果。
• :src 也同樣道理可傳入 data 內的網址來呈現圖片。
  課程範例

綁定 Class

綁定樣式，參考文件 Class 与 Style 绑定
可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

// html
<div id="app">
  <div class="box" :class="{rotate: isTransform}"></div>
  <button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>
</div>

// css
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all .5s;
}

.box.rotate {
  transform: rotate(45deg)
}

// JS
var app = new Vue({
  el: '#app',
  data: {
    isTransform: false,
  },
});

• :class 可以使用動態切換 className。
• "{rotate: isTransform}" 物件中的前者為 className 名稱，後者為判斷式，當為真值時則啟用前者的 className。
• 透過動態切換 isTransform 的 true or false 來決定是否套用 rotate。
  課程範例

綁定的物件也不需要撰寫在模板內，在 data 內定義同樣可運作。

// html
<div id="app">
  <div class="box" :class="objectClass"></div>
  <hr>
  <button class="btn btn-outline-primary" v-on:click="objectClass.rotate = !objectClass.rotate">選轉物件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">
    <label class="form-check-label" for="classToggle2">切換色彩</label>
  </div>
</div>

// css
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all .5s;
}

.box.rotate {
  transform: rotate(45deg)
}


// JS
var app = new Vue({
  el: '#app',
  data: {
    objectClass: {
      'rotate': false,
      'bg-danger': false,
    },
  },
});

課程範例

行內樣式

Style 也同樣可以使用動態屬性的方式傳入，但要特別注意 class 的名稱要使用小駝峰

// html
<div id="app">
  <div class="box" :style="{backgroundColor: styleObject.backgroundColor}"></div>
  <div class="box" :style="styleObject"></div>
  <div class="box" :style="[styleObject, styleObject2]"></div>
</div>

// css
.box {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

// JS
var app = new Vue({
  el: '#app',
  data: {
    // 使用駝峰式命名
    styleObject: {
      backgroundColor: 'red',
      borderWidth: '5px'
    },
    styleObject2: {
      boxShadow: '3px 3px 5px rgba(0, 0, 0, 1)'
    },
    styleObject3: {
      userSelect: 'none'
    }
  },
});

• 可以透過 :style 的方式傳入樣式
• 傳入時，樣式的屬性名稱需要使用小駝峰的方式撰寫
• { backgroundColor: 'red' } 前者為 CSS 的屬性，後者為該屬性的值
  課程範例